<template>
  <div class="dayQualityControl tapStyle secondary-page-mode">
    <div class="currency-mode-wrap" style="margin-top: 0;height: 100%;">
      <!-- <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content" style="width: 100%">
          <div class="reminder-text">
            <p>该点位最新一次质控参数设置于xxxx年xx月xx日，至今已使用xx年xx月x天；期间日质控合格了m次；不合格了m次。造成无效数据xx条</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
      </div> -->
      <div class="currency-body-wrap" style="height: calc(100% - 52px);">
        <el-scrollbar style="height: 100%;">
          <div class="modular-box">
            <div class="modular-header">
              <span class="title">当前使用24小时质控参数信息</span>
            </div>
            <div class="modular-body">
              <div class="modular-row clear">
                <div class="statistics-text clear">
                  <span>{{levDesone}}: {{currentLev}}</span>
                  <span>{{levDestwo}}: {{targetLev}}</span>
                </div>
                <!-- <div class="statistics-text clear">
                  <span>距上次质控已有x天x小时x分x秒</span>
                </div> -->
                <div class="toolbar">
                  <el-button @click="dailyQuality=true" style="margin: 0;display: inline-block;vertical-align: middle;">参数设置</el-button>
                </div>
              </div>
              <div class="table-box" style="padding: 0 6px 6px;">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="indexName"
                    label="监测项目">
                  </el-table-column>
                  <el-table-column
                    prop="standardValue"
                    label="标准溶液浓度">
                    <template slot-scope="scope">
                      <span>{{scope.row.standardValue}} ({{scope.row.indexUnit}})</span>
                    </template>
                  </el-table-column>
                 <!-- <el-table-column
                    prop="solution"
                    width="160"
                    label="标准溶液浓度">
                  </el-table-column>-->
                  <el-table-column
                    prop="submitTime"
                    width="160"
                    label="提交时间">
                  </el-table-column>
                  <el-table-column
                    prop="submitter"
                    label="提交人">
                  </el-table-column>
                  <el-table-column
                    prop="auditTime"
                    width="160"
                    label="审核时间">
                  </el-table-column>
                  <el-table-column
                    prop="auditor"
                    :show-overflow-tooltip="true"
                    label="审核人">
                  </el-table-column>
                  <!--<el-table-column
                    prop="operation"
                    width="100px"
                    label="操作">
                    <template slot-scope="scope">
                      <span v-if="scope.row.operation === 0" style="color: #666">无相应权限</span>
                      <el-button @click="singleFactor = true" type="secondBtn">设置</el-button>
                    </template>
                  </el-table-column>-->
                  <el-table-column
                    prop="historicalRecord"
                    width="100px"
                    label="审核">
                    <template slot-scope="scope">
                      <span v-if="scope.row.operation === 0" style="color: #666">无相应权限</span>
                      <el-button type="secondBtn">审核</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="modular-box">
            <div class="modular-header">
              <span class="title">历史周质控参数信息</span>
              <div class="toolbar">
                <span>时间范围 : </span>
                <div class="layoutBox" style="width:242px">
                  <el-date-picker v-model="dateRange" align="right" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>&emsp;
                <el-button style="margin: 0;" @click="historyWeekQuality()"><i class="iconfont icon-sousuo"></i>查询</el-button>
              </div>
            </div>
            <div class="modular-body">
              <div class="modular-row">
                <div class="state-radio-wrap" style="padding-bottom: 6px;">
                  <el-radio-group v-model="stateRadio" size="small" @change="historyWeekQuality">
                    <el-radio-button label="w01010">水温</el-radio-button>
                    <el-radio-button label="w01009">溶解氧</el-radio-button>
                    <el-radio-button label="w01001">pH</el-radio-button>
                    <el-radio-button label="w01014">电导率</el-radio-button>
                    <el-radio-button label="w01003">浊度</el-radio-button>
                  </el-radio-group>
                </div>
                <!-- <div class="statistics-text clear">
                  <span class="title">水温（℃）</span>
                </div>
                <div class="statistics-text clear">
                  <span>该时间段共有周质控x次，合格m次，不合格n次，影响数据y条</span>
                </div> -->
              </div>
              <div class="table-box" style="padding: 0 6px 6px;">
                <el-table
                  :data="tableDataB"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="monthWeek"
                    label="周数">
                  </el-table-column>
                  <el-table-column
                    prop="submitTime"
                    label="提交时间">
                  </el-table-column>
                  <el-table-column
                    prop="submitter"
                    label="提交人">
                  </el-table-column>
                  <el-table-column
                    prop="auditTime"
                    label="审核时间">
                  </el-table-column>
                  <el-table-column
                    prop="auditor"
                    label="审核人">
                  </el-table-column>
                  <el-table-column
                    prop="zeroStandard"
                    label="仪器测试值">
                  </el-table-column>
                  <el-table-column
                    prop="standardValue"
                    label="标准溶液浓度">
                  </el-table-column>
                  <el-table-column
                    prop="error"
                    label="误差">
                  </el-table-column>
                  <el-table-column
                    prop="impactData"
                    label="影响数据">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 参数设置dialog弹窗 -->
    <el-dialog
      width="480px" title="项目设置详情"
      @close="resetProjectListData()"
      :visible.sync="dailyQuality" >
      <div class="daily-quality-box" style="padding: 8px;">
        <div class="daily-head-wrap">
          <div class="row clear">
            <span class="label">当前点位：{{stationName}}</span>
          </div>
          <div class="row clear">
           <span>{{levDesone}}: {{currentLev}}</span>
                  <span>{{levDestwo}}: {{targetLev}}</span>
          </div>
          <div class="row clear">
            <span class="label">所属区域：{{areaName}}</span>
            <span class="label">所属流域：{{basinName}}</span>
          </div>
        </div>
        <div class="daily-table-wrap">
          <table class="normal-table" style="width: 100%">
            <tr>
              <th width="134px;">监测项目</th>
              <th>标准溶液浓度</th>
            </tr>
            <tr v-for="(item,index) in projectList" :key="index">
              <td>{{ item.name }}</td>
              <td> <div class="layoutBox" style="width:100px"><el-input v-model="item.value"></el-input></div> <span class="company-text">（{{ item.company }}）</span></td>
            </tr>
            <!--<tr>
              <td>pH</td>
              <td> <div class="layoutBox" style="width:100px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>溶解氧</td>
              <td> <div class="layoutBox" style="width:100px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>电导率</td>
              <td> <div class="layoutBox" style="width:100px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>浊度</td>
              <td> <div class="layoutBox" style="width:100px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>-->
          </table>
          <div class="btn-wrap">
            <el-button @click="projectSettingsQuality()" style="width: 100px;">提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 参数设置dialog弹窗 -->
    <el-dialog
      width="550px" title="单因子质控设置"
      :visible.sync="singleFactor" >
      <div class="daily-quality-box" style="padding: 8px;">
        <div class="daily-head-wrap">
           <div class="row clear">
            <span class="label">当前点位：{{stationName}}</span>
          </div>
          <div class="row clear">
            <span class="label">{{levDesone}}: {{targetLev}}</span>
            <span class="label">{{levDestwo}}: {{currentLev}}</span>
          </div>
          <div class="row clear">
            <span class="label">所属区域：{{areaName}}</span>
            <span class="label">所属流域：{{basinName}}</span>
          </div>
        </div>
        <div class="daily-table-wrap">
          <table class="normal-table" width="100%">
            <tr>
              <th width="134px;">监测项目</th>
              <th>高锰酸盐</th>
            </tr>
            <tr>
              <td>上一周的水质平均值</td>
              <td>1.9（mg/L）</td>
            </tr>
            <tr>
              <td>跨度值</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>零点标准溶液浓度</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>跨度标准溶液浓度</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td></td>
              <td><el-button>提交</el-button></td>
            </tr>
          </table>
          <div class="btn-wrap">
            <el-button style="width: 100px;">批量提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'dayQualityControl',
    data(){
      return{
        levDesone:'目标水质',
        levDestwo:'当前水质',
        targetLev:'',//目标水质
        currentLev:'',//当前水质
        stationName:'',
        areaName:'',
        basinName:'',
        value:[],
        dateRange:'',
        stateRadio:'w01010',
        stationId:'',
        optionData: [
          { value: 1, label: "水温", standard: "", isShow: true },
          { value: 2, label: "pH", standard: "6~9", isShow: true },
          { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
          { value: 4, label: "电导率", standard: "", isShow: true },
          { value: 5, label: "浊度", standard: "", isShow: true },
          { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
          { value: 7, label: "氨氮", standard: "1", isShow: true },
          { value: 8, label: "总磷", standard: "0.2", isShow: true },
          { value: 9, label: "总氮", standard: "", isShow: true }
        ],
        tableData:[],
        tableDataB:[{
          weeks:'四月第一周',
          subTime:'2018-10-24 12:10:24',
          submitter:'张三',
          auditTime:'2018-10-26 14:45:10',
          auditor:'刑铭',
          spanValue:'-',
          zeroStandard:'-',
          error:'2次',
          impactData:'2316条',
        }],
        dailyQuality: false,
        tableInput:'',
        singleFactor: false,
        dialogData:[{
          monitoringItems:'高锰酸钾',
          waterQuality:'',
          spanValue:'',
          zeroPoint:'',
          span:'',
        },{
          monitoringItems:'氨氮',
          waterQuality:'',
          spanValue:'',
          zeroPoint:'',
          span:'',
        },{
          monitoringItems:'总磷',
          waterQuality:'',
          spanValue:'',
          zeroPoint:'',
          span:'',
        },{
          monitoringItems:'总氮',
          waterQuality:'',
          spanValue:'',
          zeroPoint:'',
          span:'',
        }],
        projectList:[{
          name:'水温',
          code:'w01010',
          value:'',
          company:'℃'
        },{
          name:'溶解氧',
          code:'w01009',
          value:'',
          company:'mg/l'
        },{
          name:'pH',
          code:'w01001',
          value:'',
          company:'无量纲'
        },{
          name:'电导率',
          code:'w01014',
          value:'',
          company:'μS/cm'
        },{
          name:'浊度',
          code:'w01003',
          value:'',
          company:'NTU'
        }],
        resetProjectList:[],
        stationType:''
      }
    },
    methods:{
      //获取当前水质或者污染源等级
      getLev(){
           this.$http.get("/Quality/qualityControlSet/getStationCurrentWaterQualityData", {
          params: {
            stationCode:  this.stationId
          }
        }).then(res=>{
            if(this.stationType == '002'){
            this.currentLev = this.paramsObj.setPolluLev(res.data.content.info);
          }else{
            this.currentLev = this.paramsObj.setWaterLev(res.data.content.info);
          }
        })
      },
      //获取周质控当前使用24小时质控参数信息
      getCurrentData(){
        this.$http.get("/Quality/qualityControlSet/currentWeekQualityControlParam", {
          params: {
            stationCodes:  this.stationId
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.tableData = res.data.content.dataList;
          }
        })
      },
      //获取周质控历史质控参数信息
      historyWeekQuality(){
        this.$http.get("/Quality/qualityControlSet/historyWeekQualityControlParam", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            indexCodes: this.stateRadio,
            stationCodes:  this.stationId
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.tableDataB = res.data.content.dataList;
          }
        })
      },
      //获取周质控历史质控参数信息
      projectSettingsQuality(){
        let list = [];
        this.projectList.forEach((item)=>{
          let obj = {
            stationCodes:this.stationId,
            indexCode:item.code,
            standardValue:item.value,
          };
          list.push(obj);
        });
        this.$http.post("/Quality/qualityControlSet/editorCurrentWeekQualityControlParam", list).then(res=>{
          if(res.data.code === 0){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.getCurrentData();
            this.historyWeekQuality();
            this.resetProjectListData();
            this.dailyQuality = false;
          }
        });
      },
      //重置项目设置详情弹窗表格的数据
      resetProjectListData(){
        this.projectList = JSON.parse(JSON.stringify(this.resetProjectList));
      }
    },
    created(){
      this.$store.commit('setShowlefttree',true);
      this.dateRange = [new Date(new Date().setDate(new Date().getDate()-10)),new Date()];

      this.resetProjectList = JSON.parse(JSON.stringify(this.projectList));

      //测试使用=》开始
      // this.stationId = '10005';
      // this.$nextTick(()=>{
      //   this.getCurrentData();
      //   this.historyWeekQuality();
      // });
      //测试使用=》结束
    },
    computed: {
      totalPageNumber() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.total / this.pageSize);
        return number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
           
           this.stationName=value[0].nodeName;
           this.stationType=value[0].stationType1;
          this.areaName=value[0].areaName
          this.basinName=value[0].basinName;
          if(value[0].stationType1 === '002'){
              this.levDesone = "当前排放";
          this.levDestwo = "排放标准";
              
             this.targetLev=this.paramsObj.setPolluLev(value[0].targerWaterQuality)
          }else{
               this.levDesone='当前水质';
             this.levDestwo='目标水质';
             this.targetLev=this.paramsObj.setWaterLev(value[0].targerWaterQuality)
          }
          this.getCurrentData();
          this.historyWeekQuality();
          this.getLev()
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .editInput{
    width: 50px;
    border: none;
    outline: none;
  }
  .modular-box{
    border: 1px solid #dce9fa;
    margin-top: 6px;
    .modular-header{
      height: 40px;
      line-height: 40px;
      padding: 0 8px;
      border-bottom: 1px solid #dce9fa;
      .title{
        font-size: 16px;
      }
      .title:before{
        content:'';
        display: inline-block;
        vertical-align: middle;
        width: 3px;
        height: 10px;
        background: #166bce;
        margin-bottom: 3px;
        margin-right: 16px;
      }
    }
    .modular-body{
      min-height: 100px;
    }
    .toolbar{
      float: right;
      line-height: 38px;
      &>button{
        margin-bottom: 3px;
      }
    }
    .modular-row{
      padding: 6px;
    }
  }
  .currency-body-wrap{
    height: calc(100%);
  }
  .statistics-text{
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: #e6f1fc;
    border: 1px solid #cad9eb;
    line-height: 36px;
    height: 36px;
    padding: 0 10px;
    .title{
      color: #186cce;
      font-size: 16px;
    }
    &>span{
      margin-right: 24px;
    }
    &>span:last-child{
      margin-right: 0;
    }
    &:before{
      content:'';
      position: absolute;
      width: 7px;
      height: 7px;
      border: 2px solid #166bce;
      border-right: none;
      border-bottom: none;
      top: -1px;
      left: -1px;
    }
    &:after{
      content:'';
      position: absolute;
      width: 7px;
      height: 7px;
      border: 2px solid #166bce;
      border-top: none;
      border-left: none;
      right: -1px;
      bottom: -1px;
    }
  }
  /* 日质控设置弹窗样式 */
  .daily-quality-box{
    .daily-head-wrap{
      .row{
        padding-bottom: 10px;
        &>span{
          width: 50%;
          float: left;
        }
      }
    }
    .daily-table-wrap{
      .normal-table{
        th{
          text-align: center;
          height: 40px;
        }
        td{
          text-align: center;
          padding: 4px;
          height: 40px;
        }
      }
      .btn-wrap{
        text-align: center;
        padding-top: 10px;
      }
    }
  }
  .company-text{
    display: inline-block;
    vertical-align: top;
    width: 68px;
    text-align: left;
  }
</style>
